<template>
  <div id="residentialAreaInfoBox">
    <!-- 头部 -->
    <residential-area-info-header
      @headerAddBtnClick="headerAddBtnClick"
      @headerSearchBtnClick="headerSearchBtnClick"
    />
    <!-- 表格 -->
    <residential-area-info-table
      :tableData="residentialAreaList"
      @tableAlterLinkClick="tableAlterLinkClick"
      @firstPageClick="firstPageClick"
      @previousPageClick="previousPageClick"
      @nextPageClick="nextPageClick"
      @lastPageClick="lastPageClick"
      @junkToOtherPage="junkToOtherPage"
    />

    <!-- 添加小区信息 -->
    <el-dialog
      :visible.sync="isShowAddDialog"
      width="808px"
      class="dialogTitle_G"
      @close="closeAddDialog"
    >
      <span slot="title" class="dialogTitle_blue_G">添加小区</span>
      <el-form label-width="80px" class="form_G">
        <el-form-item label="小区名称">
          <el-input placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="小区地区">
          <el-cascader
            size="small"
            clearable
            placeholder="请选择省、市、区"
            class="formCascader_G"
            :props="{ expandTrigger: 'hover' }"
            :options="selectOptions"
            v-model="dialogData.selectedOptions"
            @change="handleSelectChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="小区地址">
          <el-input placeholder="请输入小区地址"></el-input>
        </el-form-item>
        <el-form-item label="附件地标">
          <el-input placeholder="请输入附件地标"></el-input>
        </el-form-item>
        <el-form-item label="社区编码">
          <el-input placeholder="请输入社区编码"></el-input>
        </el-form-item>
        <el-form-item label="上限户数" class="elFormItemMarginBottom36_G">
          <el-input placeholder="请输入上限户数"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer_G">
        <cs-btn
          type="primary"
          @click.native="confirmBtnClick"
          btnText="确定"
          :buttonStatus="buttonStatus"
          :largeBtnWidth="true"
          :largeMarginRight="true"
        />

        <cs-btn
          @click.native="isShowAddDialog = false"
          btnText="取消"
          :largeBtnWidth="true"
        />
      </div>
    </el-dialog>

    <!-- 修改小区信息 -->

    <el-dialog
      :visible.sync="isShowAlterDialog"
      width="808px"
      class="dialogTitle_G"
      @close="closeAlterDialog"
    >
      <span slot="title" class="dialogTitle_blue_G">修改</span>
      <el-form label-width="80px" class="form_G">
        <el-form-item label="小区名称">
          <el-input placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="小区地址">
          <el-input placeholder="请输入小区地址"></el-input>
        </el-form-item>
        <el-form-item label="附件地标">
          <el-input placeholder="请输入附件地标"></el-input>
        </el-form-item>
        <el-form-item label="社区编码">
          <el-input placeholder="请输入社区编码"></el-input>
        </el-form-item>
        <el-form-item label="上限户数" class="elFormItemMarginBottom36_G">
          <el-input placeholder="请输入上限户数"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer_G">
        <cs-btn
          type="primary"
          @click.native="confirmBtnClick"
          btnText="确定"
          :buttonStatus="buttonStatus"
          :largeBtnWidth="true"
          :largeMarginRight="true"
        />

        <cs-btn
          @click.native="isShowAlterDialog = false"
          btnText="取消"
          :largeBtnWidth="true"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ResidentialAreaInfoHeader from "./cpns/ResidentialAreaInfoHeader";
import ResidentialAreaInfoTable from "./cpns/ResidentialAreaInfoTable";

import CsBtn from "@/components/CsBtn/CsBtn.vue";

import { mapState } from "vuex";

import { regionDataPlus, CodeToText } from "element-china-area-data";

export default {
  name: "ResidentialAreaInfo",
  components: {
    ResidentialAreaInfoHeader,
    ResidentialAreaInfoTable,
    CsBtn,
  },
  data() {
    return {
      // 查询列表参数
      queryParams: {
        offset: 1,
        limit: 10,
      },
      // tableData: [],
      // 添加小区信息对话框dialog start
      isShowAddDialog: false,
      buttonStatus: false,
      selectOptions: regionDataPlus,
      dialogData: {
        selectedOptions: "",
      },
      // 添加小区信息对话框dialog end
      // 修改小区信息对话框样式 start
      isShowAlterDialog: false,
      buttonStatus: false,
      dialogData: {},
      // 修改小区信息对话框样式 end
    };
  },
  created() {
    // 获取小区信息
    this.getResidentialData();
  },
  computed: {
    ...mapState("residentialArea", ["residentialAreaList"]),
  },
  methods: {
    // 头部添加小区信息点击事件
    headerAddBtnClick() {
      this.isShowAddDialog = true;
    },
    // 头部搜索按钮点击事件
    headerSearchBtnClick(data) {
      console.log(data);
    },
    // 获取小区列表
    async getResidentialData() {
      await this.$store.dispatch(
        "residentialArea/getResidentialAreaList",
        this.queryParams
      );
      console.log(this.residentialAreaList);
    },
    // 第一页按钮点击
    firstPageClick() {
      this.queryParams.offset = 1;
      this.getResidentialData();
    },
    // 上一页按钮点击
    previousPageClick() {
      this.queryParams.offset -= 1;
      this.getResidentialData();
    },
    // 下一页按钮点击
    nextPageClick() {
      this.queryParams.offset += 1;
      this.getResidentialData();
    },
    // 最后一页按钮点击
    lastPageClick() {
      this.queryParams.offset = this.residentialAreaList.totalPage;
      this.getResidentialData();
    },
    // 输入页数跳转
    junkToOtherPage(pageNum) {
      this.queryParams.offset = pageNum;
      this.getResidentialData();
    },
    // 表格修改链接点击事件
    tableAlterLinkClick() {
      this.isShowAlterDialog = true;
    },
    // 关闭添加对话框事件
    closeAddDialog() {
      this.isShowAddDialog = false;
    },
    // 处理添加小区信息对话框选择下拉事件
    handleSelectChange(value) {
      let loc = "";
      for (let i = 0; i < this.headerData.selectedOptions.length; i++) {
        loc += CodeToText[this.headerData.selectedOptions[i]];
      }
      console.log(loc);
    },
    // 关闭修改对话框事件
    closeAlterDialog() {
      this.isShowAlterDialog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
#residentialAreaInfoBox {
  margin: 26px;
}
</style>
